<template>
  <div>
    <i-page-header class="product_tabs" title="商户提交审核"> </i-page-header>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <Form ref="formValidate" :model="formValidate">
        <Row type="flex" :gutter="24">
          <div class="label">商户名称:</div>
          <div style="width: 160px" class="value">
            <el-input
              v-model="formValidate.name"
              placeholder="请输入商户名称"
            />
          </div>

          <div class="label">闭店时间:</div>
          <div style="width: 210px" class="value">
            <DatePicker
              v-model="formValidate.timeVal"
              format="yyyy/MM/dd"
              type="datetimerange"
              placement="bottom-start"
              placeholder="自定义时间"
              style="width: 210px"
              class="mr20"
            ></DatePicker>
          </div>
          <Col>
            <FormItem label="　" label-for="uid">
              <Button
                type="primary"
                icon="ios-search"
                label="default"
                class="mr15"
                @click="getSearch"
                >搜索</Button
              >
            </FormItem>
          </Col>
        </Row>
      </Form>

      <Table
        :columns="columns1"
        :data="tableData"
        class="mt25"
        no-userFrom-text="暂无数据"
        no-filtered-userFrom-text="暂无筛选结果"
        :loading="loading"
        highlight-row
      >
      </Table>

      <div class="acea-row row-right page">
        <Page
          :total="page.count"
          show-elevator
          show-total
          @on-change="tapPage"
          :page-size="page.pageSize"
        />
      </div>
    </Card>

    <el-dialog
      :visible.sync="dialogVisible2"
      title="查看数据"
      :close-on-click-modal="false"
      width="680px"
    >
      <el-form :model="form" ref="form" label-width="100px">
        <div>
          <el-row :space="24">
            <el-col :span="12">
              <el-form-item label="商户名称">
                {{ form.name }}
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :space="24">
            <el-col :span="12">
              <el-form-item label="上次清洁">
                {{ form.sub_time }}
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="下次清洁">
                {{ form.next_time }}
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :space="24">
            <el-col :span="12">
              <el-form-item label="延迟天数"> {{ form.v }}天 </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="理由">
                {{ form.mono }}
              </el-form-item>
            </el-col>
          </el-row>

          <el-divider content-position="left">我要审核</el-divider>

          <el-row :space="24">
            <el-col :span="12">
              <el-form-item label="审核状态">
                <div class="fx-r" style="padding-top: 10px">
                  <el-radio-group v-model="form.sh_type">
                    <el-radio :label="1">审核通过</el-radio>
                    <el-radio :label="2">审核拒绝</el-radio>
                  </el-radio-group>
                </div>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :space="24">
            <el-col :span="24">
              <el-form-item label="审核情况">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 6, maxRows: 8 }"
                  placeholder="请输入审核情况"
                  v-model="form.sh_mono"
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <Button type="primary" @click="tapShSubmit()">立即审核</Button>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import IPageHeader from '@/layouts/system/page-header/index'
import VueUeditorWrap from 'vue-ueditor-wrap'
import { mapState, mapActions } from 'vuex'
import UiUpload from '@/ui/upload/index'
import Setting from '@/setting'
import { SystemArea } from '../../../api/system/pub'
import UiUploadMuch from '../../../ui/upload/more_index'
import {
  SystemMember,
  SystemMemberMentorSave,
  SystemMemberVipDel,
  SystemMemberVipList,
  SystemMemberVipSave,
} from '../../../api/system/member'
import {
  SystemMerchantsAll,
  SystemMerchantsCqShDel,
  SystemMerchantsCqShSub,
  SystemMerchantsCqSqInit,
  SystemMerchantsCqSqList,
  SystemMerchantsShDel,
  SystemMerchantsShInit,
  SystemMerchantsShList,
  SystemtsxxList,
  SystemMerchantsUserDel,
  SystemMerchantsUserList,
  SystemMerchantsUserSave,
} from '../../../api/system/merchants'
import UserInfo from '../member/userInfo.vue'
import { SystemProjectInit } from '../../../api/system/project'
export default {
  name: 'merchants_index',
  components: { UserInfo, UiUploadMuch, VueUeditorWrap, UiUpload, IPageHeader },
  computed: {},
  data() {
    return {
      title: '详情操作',
      dialogVisible: false,
      upHeaders: {},
      upUrl: '',
      grid: {
        xl: 7,
        lg: 7,
        md: 12,
        sm: 24,
        xs: 24,
      },

      formValidate: {},
      columns1: [
        {
          title: 'ID',
          key: 'id',
          width: 80,
        },
        {
          title: '店铺名称',
          key: 'm_name',
          minWidth: 150,
          align: 'center',
        },

        {
          title: '微信名',
          key: 'wx_name',
          minWidth: 100,
          align: 'center',
        },
        {
          title: '联系人电话',
          key: 'm_tel',
          minWidth: 100,
          align: 'center',
        },

        {
          title: '推送时间',
          key: 'time',
          minWidth: 100,
          align: 'center',
        },
      ],
      userInfoUi: [],
      loading: true,
      tableData: [],
      page: {
        count: 0, //一共多少数量
        pageSize: 0, //每一页码数量
        page: 1, //当前页码
      },

      merchantsAr: [],
      activeName: 'tab_',
      tabsAr: [],

      dialogVisible2: false,
      form: {},
    }
  },

  created() {
    this.initView()
  },
  methods: {
    initView: function () {
      this.getMemberData()
    },

    /**
     * 新闻列表
     */
    getMemberData() {
      this.loading = true
      SystemtsxxList({
        page: this.page.page,
        ...this.formValidate,
        type: this.activeName.replace('tab_', ''),
      })
        .then((res) => {
          if (res.code == 200) {
            this.tableData = res.data.list
            this.loading = false

            this.page.pageSize = res.data.pageSize
            this.page.count = res.data.pageCount
            console.log(this.page)
          } else {
            this.loading = false
            this.$alert(res.msg)
          }
        })
        .catch((res) => {
          console.log(res)
          this.loading = false
          this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
        })
    },
    /**
     * 关闭
     */
    editClose: function () {
      this.dialogVisible = false
    },
    /**
     * 修改数据
     */
    tapShSubmit: function () {
      if (this.form.sh_type == '' || this.form.sh_type == null) {
        this.$alert('请输入审核状态')
        return
      }

      let loading = this.$loading('提交数据中...')
      SystemMerchantsCqShSub(this.form)
        .then((res) => {
          loading.close()
          if (res.code == 200) {
            this.dialogVisible2 = false
            this.$Message.success('操作成功')
            this.getMemberData()
          } else {
            this.$alert(res.msg, '系统提示')
          }
        })
        .catch((err) => {
          loading.close()
          this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
        })
    },
    /**
     * tab数据
     */
    tapTabs: function () {
      this.page.page = 1
      this.getMemberData()
    },
    /**
     * 分页
     */
    tapPage: function (index) {
      this.page.page = index
      this.getMemberData()
    },

    getSearch: function () {
      this.page.page = 1
      this.getMemberData()
    },

    tapSh: function (item) {
      this.dialogVisible2 = true
      this.form = JSON.parse(JSON.stringify(item))
    },

    tapDel: function (row) {
      this.$utils
        .confirm(this, {
          title: '确定要移除本次审核吗？',
          success: () => {
            return SystemMerchantsCqShDel({ id: row.id })
          },
        })
        .then((res) => {
          if (res.code == 200) {
            this.$message({ message: res.msg, type: 'success' })
            this.getMemberData()
          } else {
            this.$alert(res.msg)
          }
        })
        .catch((err) => {
          console.log(err)
          this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
        })
    },
  },
}
</script>
<style scoped>
.platform-img {
  width: 20px;
  height: 20px;
  background: #f2f2f2;
  margin-right: 4px;
}
.platform-img img {
  width: 100%;
}
</style>
